{extend name="layout/layout" /}

{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> -->
	<style>

		.category{
			padding: 10px 0;
			background: #fff;
		}

		.category .category-item{
			width:20%;
			float: left;
			padding: 5px 10px;
			height: 94px;
		}

		.category .category-item p{
			font-size: 12px;
			margin-bottom: 0;
		}

		.article{
			margin-top: 10px;
		}
		
	</style>
{/block}


{block name="header"}
<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">{$title?$title:'商城'}</h1>
</header>
{/block}

{block name="main"}
	<div class="index" v-cloak>

		<div class="swiper-container banner-swiper">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-for="ban in banner" @tap="checkAd(ban)">
		        	<img :src="ban.app_image" class="img-responsive" />
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>

		<div class="mui-row mui-text-center category">
			<div class="category-item" v-for="cat in category" @tap="checkAd(cat)">
				<img :src="cat.app_image" class="img-responsive" alt="">
				<p>{{cat.name}}</p>
			</div>
		</div>



		<div class="article">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media" v-for="article in articleList">
			        <a :href="'/mobile/article/detail/id/'+article.id">
			            <img class="mui-media-object mui-pull-left" :src="article.cover_image">
			            <div class="mui-media-body">
			                {{article.name}}
			                <!-- <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p> -->
			            </div>
			        </a>
			    </li>
			</ul>
		</div>

	</div>
{/block}

{block name="script"}
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>

		function search(){
			location.href = "/mobile/index/search";
		}

		var indexVue = new Vue({
			el:'.index',
			data: {
				banner: [],
				category: [],
				articleList: [],
			},
			mounted: function(){
				this.getIndexData();
				this.getArticle();
			},
			methods:{
				getIndexData: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var url =  'index/vk';
					var that = this;
					request(that, {'url': url}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.banner = res.data.banner;
							that.category = res.data.category;
							that.bannerSwiper();
						} else {
							mui.toast(res.msg);
						}	
					});
				},

				//获取v客文章
				getArticle: function(){
					var url =  'article/vk';
					var that = this;
					request(that, {'url': url}, function(res){
						if(res.code == 200) {
							that.articleList = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},


				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.banner-swiper', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.swiper-pagination',
						},
                    });
                },

                //广告判断
                checkAd: function(item) {
                	switch(item.android_class) {
                		case 'CateListActivity':
                			//分类商品
                			if(item.param_id) {
                				location.href = '/mobile/category/goodsList/id/'+item.param_id;
                			}
                			break;

                		case 'WebviewActivity':
                			//网页
                			if(item.url) {
                				location.href = item.url;
                			}
                			break;
                		
                		case 'WZGWShopDetailViewController':
                			//商品详情
                			if(item.param_id) {
                				location.href = '/mobile/goods/detail/id/'+item.param_id;
                			}
                			break;
                		case 'PddShopViewController':
                			//拼多多
                			location.href = '/mobile/coupon';
                			break;
            			case 'TaobaoActivity':
                			//拼多多
                			location.href = '/mobile/coupon';
                			break;
                		case 'SpikeGoodsController':
                			//秒杀商品
                			location.href = '/mobile/goods/spike';
                			break;
                		case 'GroupGoodsController':
                			//拼团商品
                			location.href = '/mobile/goods/group';
                			break;
                		case 'DialphoneActivity':
                			//拼团商品
                			location.href = '/mobile/call/index';
                			break;
                		
                		default:;
                	}

                }
			}
		});

		
	</script>
{/block}